<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>OpenLayers with Sencha Touch</title>
        <script src="../lib/OpenLayers.js?mobile"></script>
        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
        <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
        <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
        <script src="mobile-sencha.js"></script>
        <script src="mobile-base.js"></script>
        <style>
            .searchList {
                min-height: 150px;
            }

            .close-btn {
                position: absolute;
                right: 10px;
                top: 10px;
            }

            img.minus {
                -webkit-mask-image: url(img/minus1.png);
            }

            img.layers {
                -webkit-mask-image: url(img/list.png);
            }

            .gx-layer-item {
                margin-left: 10px;
            }

            #map {
                width: 100%;
                height: 100%;
            }

            .olControlAttribution {
                font-size: 10px;
                bottom: 5px;
                right: 5px;
            }

            #title, #tags, #shortdesc {
                display: none;
            }
        </style>
        <script>

        var app = new Ext.Application({
            name: "ol",
            launch: function() {
                this.viewport = new Ext.Panel({
                    fullscreen: true,
                    dockedItems: [{
                        dock: "bottom",
                        xtype: "toolbar",
                        ui: "light",
                        layout: {
                            pack: "center"
                        },
                        items: [{
                            iconCls: "search",
                            iconMask: true,
                            handler: function() {
                                // this is the app
                                if (!app.searchFormPopupPanel) {
                                    app.searchFormPopupPanel = new App.SearchFormPopupPanel({
                                        map: map
                                    });
                                }
                                app.searchFormPopupPanel.show('pop');
                            }
                        }, {
                            iconCls: "locate",
                            iconMask: true,
                            handler: function() {
                                var geolocate = map.getControlsBy("id", "locate-control")[0];
                                if (geolocate.active) {
                                    geolocate.getCurrentLocation();
                                } else {
                                    geolocate.activate();
                                }
                            }
                        }, {
                            xtype: "spacer"
                        }, {
                            iconMask: true,
                            iconCls: "add",
                            handler: function() {
                                map.zoomIn();
                            }
                        }, {
                            iconMask: true,
                            iconCls: "minus",
                            handler: function() {
                                map.zoomOut();
                            }
                        }, {
                            xtype: "spacer"
                        }, {
                            iconMask: true,
                            iconCls: "layers",
                            handler: function() {
                                if (!app.popup) {
                                    app.popup = new Ext.Panel({
                                        floating: true,
                                        modal: true,
                                        centered: true,
                                        hideOnMaskTap: true,
                                        width: 240,
                                        items: [{
                                            xtype: 'app_layerlist',
                                            map: map
                                        }],
                                        scroll: 'vertical'
                                    });
                                }
                                app.popup.show('pop');
                            }
                        }]
                    }],
                    items: [
                        {
                            xtype: "component",
                            scroll: false,
                            monitorResize: true,
                            id: "map",
                            listeners: {
                                render: function() {
                                    var self = this;
                                    init(function(feature) {
                                        var htmlContent = "";
                                        for (var property in feature.data) {
                                            if (feature.data[property] != 'undefined') {
                                                htmlContent = htmlContent + feature.data[property] + "<br>";
                                            }
                                        }
                                        if (self.featurePopup) {
                                            self.featurePopup.destroy();
                                        }
                                        self.featurePopup = new Ext.Panel({
                                            floating: true,
                                            modal: true,
                                            centered: true,
                                            hideOnMaskTap: true,
                                            width: 240,
                                            html: htmlContent,
                                            scroll: 'vertical'
                                        });
                                        self.featurePopup.show();
                                    })
                                },
                                resize: function() {
                                    if (window.map) {
                                        map.updateSize();
                                    }
                                },
                                scope: {
                                    featurePopup: null
                                }
                            }
                        }
                    ]
                });
            }
        });
        </script>
    </head>
    <body>
        <h1 id="title">OpenLayers with Sencha Touch</h1>

        <div id="tags">
            mobile, sencha touch
        </div>
        <p id="shortdesc">
            Using Sencha Touch to display an OpenLayers map.
        </p>
    </body>
</html>
